<template>
  <div class="dashboard-editor-container">
    <panel-group @handleSetLineChartData="handleSetLineChartData"/>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row>    
  </div>
</template>
<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import { getDateStr, getDaysPriorDateStr } from '@/utils/commonUtils';
import { listDeptTj, listDeptTjPay } from "@/api/system/dept";
import { listProductTj, listProductTjPay } from "@/api/business/product";
import { listOrderTjAmount, listOrderTj } from "@/api/business/order";
import { listMarketTjAmount, listMarketTj } from "@/api/business/market";
export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      newVisitis: {
        line1: [],
        line2: [],
        dateData: [],
        showType: 'newVisitis'
      },
      messages: {
        line1: [],
        line2: [],
        showType: 'messages'
      },
      purchases: {
        line1: [],
        line2: [],
        showType: 'purchases'
      },
      shoppings: {
        line1: [],
        line2: [],
        showType: 'shoppings'
      },
      lineChartData: null
    }
  },
  created () {
    this.initNewVisitis();
  },
  methods: {
    initNewVisitis() {
      let date1 = getDaysPriorDateStr(new Date(),6);
      let date2 = getDaysPriorDateStr(new Date(),5);
      let date3 = getDaysPriorDateStr(new Date(),4);
      let date4 = getDaysPriorDateStr(new Date(),3);
      let date5 = getDaysPriorDateStr(new Date(),2);
      let date6 = getDaysPriorDateStr(new Date(),1);
      let date7 = getDateStr(new Date());
      let visiteParam = {createAtstart: date1, createAtend: date7};
      let vsAry = [0, 0, 0, 0, 0, 0, 0];
      let zcAry = [0, 0, 0, 0, 0, 0, 0];
      let dateAry = [date1, date2, date3, date4, date5, date6, date7];
      listProductTj(visiteParam).then(response => {
        response.data.forEach(item => {
          if (item.tjdt === date1) {
            vsAry.splice(0,1,item.num);
          }
          if (item.tjdt === date2) {
            vsAry.splice(1,1,item.num);
          }
          if (item.tjdt === date3) {
            vsAry.splice(2,1,item.num);
          }
          if (item.tjdt === date4) {
            vsAry.splice(3,1,item.num);
          }
          if (item.tjdt === date5) {
            vsAry.splice(4,1,item.num);
          }
          if (item.tjdt === date6) {
            vsAry.splice(5,1,item.num);
          }
          if (item.tjdt === date7) {
            vsAry.splice(6,1,item.num);
          }
        });
      });
      listProductTjPay(visiteParam).then(response => {
        response.data.forEach(item => {
          if (item.tjdt === date1) {
            zcAry.splice(0,1,item.num);
          }
          if (item.tjdt === date2) {
            zcAry.splice(1,1,item.num);
          }
          if (item.tjdt === date3) {
            zcAry.splice(2,1,item.num);
          }
          if (item.tjdt === date4) {
            zcAry.splice(3,1,item.num);
          }
          if (item.tjdt === date5) {
            zcAry.splice(4,1,item.num);
          }
          if (item.tjdt === date6) {
            zcAry.splice(5,1,item.num);
          }
          if (item.tjdt === date7) {
            zcAry.splice(6,1,item.num);
          }
        });
      });
      this.newVisitis = {
        line1: vsAry,
        line2: zcAry,
        dateData: dateAry,
        showType: 'newVisitis'
      }
      this.lineChartData = this.newVisitis;
    },
    initMessages() {
      let date1 = getDaysPriorDateStr(new Date(),6);
      let date2 = getDaysPriorDateStr(new Date(),5);
      let date3 = getDaysPriorDateStr(new Date(),4);
      let date4 = getDaysPriorDateStr(new Date(),3);
      let date5 = getDaysPriorDateStr(new Date(),2);
      let date6 = getDaysPriorDateStr(new Date(),1);
      let date7 = getDateStr(new Date());      
      let visiteParam = {createAtstart: date1, createAtend: date7};
      let sjAry = [0, 0, 0, 0, 0, 0, 0];
      let mcAry = [0, 0, 0, 0, 0, 0, 0];
      let dateAry = [date1, date2, date3, date4, date5, date6, date7];
      listDeptTj(visiteParam).then(response => {
        response.data.forEach(item => {
          if (item.tjdt === date1) {
            sjAry.splice(0,1,item.num);
          }
          if (item.tjdt === date2) {
            sjAry.splice(1,1,item.num);
          }
          if (item.tjdt === date3) {
            sjAry.splice(2,1,item.num);
          }
          if (item.tjdt === date4) {
            sjAry.splice(3,1,item.num);
          }
          if (item.tjdt === date5) {
            sjAry.splice(4,1,item.num);
          }
          if (item.tjdt === date6) {
            sjAry.splice(5,1,item.num);
          }
          if (item.tjdt === date7) {
            sjAry.splice(6,1,item.num);
          }
        });
      });
      listDeptTjPay(visiteParam).then(response => {
        response.data.forEach(item => {
          if (item.tjdt === date1) {
            mcAry.splice(0,1,item.num);
          }
          if (item.tjdt === date2) {
            mcAry.splice(1,1,item.num);
          }
          if (item.tjdt === date3) {
            mcAry.splice(2,1,item.num);
          }
          if (item.tjdt === date4) {
            mcAry.splice(3,1,item.num);
          }
          if (item.tjdt === date5) {
            mcAry.splice(4,1,item.num);
          }
          if (item.tjdt === date6) {
            mcAry.splice(5,1,item.num);
          }
          if (item.tjdt === date7) {
            mcAry.splice(6,1,item.num);
          }
        });
      });
      this.messages = {
        line1: sjAry,
        line2: mcAry,
        dateData: dateAry,
        showType: 'messages'
      }
      this.lineChartData = this.messages;
    },
    initPurchases() {
      let date1 = getDaysPriorDateStr(new Date(),6);
      let date2 = getDaysPriorDateStr(new Date(),5);
      let date3 = getDaysPriorDateStr(new Date(),4);
      let date4 = getDaysPriorDateStr(new Date(),3);
      let date5 = getDaysPriorDateStr(new Date(),2);
      let date6 = getDaysPriorDateStr(new Date(),1);
      let date7 = getDateStr(new Date());
      let visiteParam = {createAtstart: date1, createAtend: date7};
      let payAry = [0, 0, 0, 0, 0, 0, 0];
      let cslAry = [0, 0, 0, 0, 0, 0, 0];
      let dateAry = [date1, date2, date3, date4, date5, date6, date7];
      listOrderTjAmount(visiteParam).then(response => {
        response.data.forEach(item => {
          if (item.tjdt === date1) {
            payAry.splice(0,1,item.payAmount);
          }
          if (item.tjdt === date2) {
            payAry.splice(1,1,item.payAmount);
          }
          if (item.tjdt === date3) {
            payAry.splice(2,1,item.payAmount);
          }
          if (item.tjdt === date4) {
            payAry.splice(3,1,item.payAmount);
          }
          if (item.tjdt === date5) {
            payAry.splice(4,1,item.payAmount);
          }
          if (item.tjdt === date6) {
            payAry.splice(5,1,item.payAmount);
          }
          if (item.tjdt === date7) {
            payAry.splice(6,1,item.payAmount);
          }
        });
      });
      listMarketTjAmount(visiteParam).then(response => {
        response.data.forEach(item => {
          if (item.tjdt === date1) {
            cslAry.splice(0,1,item.marketAmount);
          }
          if (item.tjdt === date2) {
            cslAry.splice(1,1,item.marketAmount);
          }
          if (item.tjdt === date3) {
            cslAry.splice(2,1,item.marketAmount);
          }
          if (item.tjdt === date4) {
            cslAry.splice(3,1,item.marketAmount);
          }
          if (item.tjdt === date5) {
            cslAry.splice(4,1,item.marketAmount);
          }
          if (item.tjdt === date6) {
            cslAry.splice(5,1,item.marketAmount);
          }
          if (item.tjdt === date7) {
            cslAry.splice(6,1,item.marketAmount);
          }
        });
      });
      this.purchases = {
        line1: payAry,
        line2: cslAry,        
        dateData: dateAry,
        showType: 'purchases'
      }
      this.lineChartData = this.purchases;
    },
    initShoppings() {
      let date1 = getDaysPriorDateStr(new Date(),6);
      let date2 = getDaysPriorDateStr(new Date(),5);
      let date3 = getDaysPriorDateStr(new Date(),4);
      let date4 = getDaysPriorDateStr(new Date(),3);
      let date5 = getDaysPriorDateStr(new Date(),2);
      let date6 = getDaysPriorDateStr(new Date(),1);
      let date7 = getDateStr(new Date());
      let visiteParam = {createAtstart: date1, createAtend: date7};
      let payAry = [0, 0, 0, 0, 0, 0, 0];
      let cslAry = [0, 0, 0, 0, 0, 0, 0];
      let dateAry = [date1, date2, date3, date4, date5, date6, date7];
      listOrderTj(visiteParam).then(response => {
        response.data.forEach(item => {
          if (item.tjdt === date1) {
            payAry.splice(0,1,item.num);
          }
          if (item.tjdt === date2) {
            payAry.splice(1,1,item.num);
          }
          if (item.tjdt === date3) {
            payAry.splice(2,1,item.num);
          }
          if (item.tjdt === date4) {
            payAry.splice(3,1,item.num);
          }
          if (item.tjdt === date5) {
            payAry.splice(4,1,item.num);
          }
          if (item.tjdt === date6) {
            payAry.splice(5,1,item.num);
          }
          if (item.tjdt === date7) {
            payAry.splice(6,1,item.num);
          }
        });
      });
      listMarketTj(visiteParam).then(response => {
        response.data.forEach(item => {
          if (item.tjdt === date1) {
            cslAry.splice(0,1,item.num);
          }
          if (item.tjdt === date2) {
            cslAry.splice(1,1,item.num);
          }
          if (item.tjdt === date3) {
            cslAry.splice(2,1,item.num);
          }
          if (item.tjdt === date4) {
            cslAry.splice(3,1,item.num);
          }
          if (item.tjdt === date5) {
            cslAry.splice(4,1,item.num);
          }
          if (item.tjdt === date6) {
            cslAry.splice(5,1,item.num);
          }
          if (item.tjdt === date7) {
            cslAry.splice(6,1,item.num);
          }
        });
      });
      this.shoppings = {
        line1: payAry,
        line2: cslAry,        
        dateData: dateAry,
        showType: 'shoppings'
      }
      this.lineChartData = this.shoppings;
    },
    handleSetLineChartData(type) {
      if (type === 'newVisitis') {
        this.initNewVisitis();
        this.lineChartData = this.newVisitis;
      } else if (type === 'messages') {
        this.initMessages();
        this.lineChartData = this.messages;
      } else if (type === 'purchases') {
        this.initPurchases();
        this.lineChartData = this.purchases;
      } else if (type === 'shoppings') {
        this.initShoppings();
        this.lineChartData = this.shoppings;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>